<template>
  <el-menu
    default-active="2"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
  <h3>{{isCollapse ? "后台" : "通用后台管理"}}</h3>
  <MenuBar :menus="menus" />
  </el-menu>
</template>
<script setup lang="ts">
import MenuBar from './MenuBar.vue'
import { reactive, computed } from 'vue'
import { useStore } from 'vuex';

const store = useStore();
const isCollapse = computed(() => {
  return store.state.tab.isCollapse;
})
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const menus = computed(() => {
  return store.state.tab.menu;
})

</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
  border: none;

  h3 {
    color: #fff;
    text-align: center;
    line-height: 48px;
    margin: 0;
  }
}
</style>